<div class="page">
    <div class="page__hd">
        <h1 class="page__title">Half-screen Dialog</h1>
        <p class="page__desc">半屏组件</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <a href="javascript:" class="weui-btn weui-btn_default" id="showIOSDialog1">样式一</a>
        <a href="javascript:" class="weui-btn weui-btn_default" id="showIOSDialog2">样式二</a>
        <a href="javascript:" class="weui-btn weui-btn_default" id="showIOSDialog3">样式三</a>
    </div>

    <div id="dialogs">
        <!--BEGIN dialog1-->
        <div class="js_dialog" id="iosDialog1" style="display: none;">
            <div class="weui-mask"></div>
            <div id="js_dialog_1" class="weui-half-screen-dialog">
                <div class="weui-half-screen-dialog__hd">
                  <div class="weui-half-screen-dialog__hd__side">
                    <button class="weui-icon-btn">关闭<i class="weui-icon-close-thin"></i></button>
                  </div>
                  <div class="weui-half-screen-dialog__hd__main">
                    <strong class="weui-half-screen-dialog__title">标题</strong>
                  </div>
                </div>
                <div class="weui-half-screen-dialog__bd">
                  <br>
                  <br>
                  可放自定义内容
                  <br>
                  <br>
                  <br>
                  <br>
                </div>
            </div>
        </div>
        <!--END dialog1-->
        <!--BEGIN dialog2-->
        <div class="js_dialog" id="iosDialog2" style="display: none;">
            <div class="weui-mask"></div>
            <div id="js_dialog_2" class="weui-half-screen-dialog">
                <div class="weui-half-screen-dialog__hd">
                  <div class="weui-half-screen-dialog__hd__side">
                    <button style="display: none;" class="weui-icon-btn">返回<i class="weui-icon-back-arrow-thin"></i></button>
                    <button class="weui-icon-btn">关闭<i class="weui-icon-close-thin"></i></button>
                  </div>
                  <div class="weui-half-screen-dialog__hd__main">
                    <strong class="weui-half-screen-dialog__title">标题</strong>
                    <span class="weui-half-screen-dialog__subtitle">标题</span>
                  </div>
                  <div class="weui-half-screen-dialog__hd__side">
                    <button class="weui-icon-btn">更多<i class="weui-icon-more"></i></button>
                  </div>
                </div>
                <div class="weui-half-screen-dialog__bd">
                  <p class="weui-half-screen-dialog__desc">
                    辅助描述内容，可根据实际需要安排
                  </p>
                  <p class="weui-half-screen-dialog__tips">
                    辅助提示内容，可根据实际需要安排
                  </p>
                </div>
                <div class="weui-half-screen-dialog__ft">
                    <a href="javascript:" class="weui-btn weui-btn_default">辅助操作</a>
                    <a href="javascript:" class="weui-btn weui-btn_primary">主操作</a>
                </div>
            </div>
        </div>
        <!--END dialog2-->
        <!--BEGIN dialog3-->
        <div class="js_dialog" id="iosDialog3" style="display: none;">
            <div class="weui-mask"></div>
            <div id="js_dialog_3" class="weui-half-screen-dialog">
                <div class="weui-half-screen-dialog__hd">
                  <div class="weui-half-screen-dialog__hd__main">
                    <div class="weui-flex" style="align-items:center;">
                      <img src="" alt="" style="width: 24px; margin-right: 8px; border-radius:50%;display: block;">
                      昵称
                    </div>
                  </div>
                </div>
                <div class="weui-half-screen-dialog__bd">
                  <br>
                  <br>
                  可放自定义内容
                  <br>
                  <br>
                </div>
                <div class="weui-half-screen-dialog__ft">
                  <div class="weui-half-screen-dialog__btn-area">
                    <a href="javascript:" class="weui-btn weui-btn_default">辅助操作</a>
                    <a href="javascript:" class="weui-btn weui-btn_primary">主操作</a>
                  </div>
                  <div class="weui-half-screen-dialog__attachment-area">
                    <a class="weui-link" href="javacript:;">附加操作</a>
                  </div>
                </div>
            </div>
        </div>
        <!--END dialog3-->
    </div>
</div>
<script type="text/javascript">
    $(function(){
        var $dialog1 = $('#js_dialog_1'),
            $dialog2 = $('#js_dialog_2'),
            $dialog3 = $('#js_dialog_3'),
            $iosDialog1 = $('#iosDialog1'),
            $iosDialog2 = $('#iosDialog2');
            $iosDialog3 = $('#iosDialog3');

        $('#dialogs').on('click', '.weui-mask', function(){
            $(this).parents('.js_dialog').fadeOut(200);
            $dialog1.removeClass('weui-half-screen-dialog_show');
            $dialog2.removeClass('weui-half-screen-dialog_show');
            $dialog3.removeClass('weui-half-screen-dialog_show');
        });

        $('#showIOSDialog1').on('click', function(){
            $iosDialog1.fadeIn(200);
            $dialog1.addClass('weui-half-screen-dialog_show');
        });
        $('#showIOSDialog2').on('click', function(){
            $iosDialog2.fadeIn(200);
            $dialog2.addClass('weui-half-screen-dialog_show');
        });
        $('#showIOSDialog3').on('click', function(){
            $iosDialog3.fadeIn(200);
            $dialog3.addClass('weui-half-screen-dialog_show');
        });
    });
</script>
